
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>幸运大转盘</title>

    <style type="text/css">
        body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
        body{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
		#main{width:100%; height:765px; position:relative; background:url(images/rotat_yk.png) no-repeat center center;}
		.text{width:100%; height:24px; background:red; font-size:14px;}
		.width_980{width:980px; margin:0 auto; position:relative;}
		.j{position:absolute; top:500px; left:380px;}
		.j p{line-height:1.6; color:#fff; font-size:16px;}
		.j p:nth-child(1){color:#c32423;}
		.j p:nth-child(2){color:#ffff00;}
		.j p span{color:red; font-weight:bold;}
		.pay{width:144px; height:49px; margin:20px 0 0 0;}
		.pay a{display:block; width:144px; height:49px; background:url(images/pay.png) no-repeat; text-indent:-99999px;}
		#g{ position:absolute; font-size:12px; width:310px;height:195px; top:394px; right:44px; overflow:hidden;font-size:14px;color:#fff;line-height:30px;text-align:left;padding:10px}
		.footer{position:absolute; top:665px; width:100%; height:70px;}
		.footer p{ line-height:1.8; color:#fff; font-weight:bold; font-size:13px;}
		.footer p span{color:red;}
        ul,ol{list-style-type:none;}
        select,input,img,select{vertical-align:middle;}
        input{ font-size:12px;}
        a{ text-decoration:none; color:#000;}
        a:hover{color:#c00; text-decoration:none;}
        .clear{clear:both;}
		#gongao{width:100%; height:24px; line-height:24px; overflow:hidden;font-size:13px;font-family:'宋体';background:#a82304;color:#fff;font-weight:bold;} 
		#gongao #scroll_begin, #gongao #scroll_end{display:inline} 

        /* 大转盘样式 */
        .banner{display:block;width:360px;position:absolute; top:290px;}
        .banner .turnplate{display:block;width:100%;position:relative;}
        .banner .turnplate canvas.item{width:100%;}
        .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;}
		
    </style>
    <script type="text/javascript" src="../js/jquery.v1.10.2.min.js"></script>
    <script type="text/javascript" src="awardRotate.js"></script>

    <script type="text/javascript">
        var num=0;
        var turnplate={
            restaraunts:[],				//大转盘奖品名称
            colors:[],					//大转盘奖品区块对应背景颜色
            outsideRadius:192,			//大转盘外圆的半径
            textRadius:155,				//大转盘奖品位置距离圆心的距离
            insideRadius:68,			//大转盘内圆的半径
            startAngle:0,				//开始角度

            bRotate:false				//false:停止;ture:旋转
        };

        $(document).ready(function(){
            //动态添加大转盘的奖品与奖品区域背景颜色
            turnplate.restaraunts =[];
            $.ajax({ url: "/b.php?c=Activity&a=getprize&list=1", async:false,dataType:"json", success: function(data){
                turnplate.restaraunts=data.list;
                num=data.surplus;
                $("#num").text(num);
                $("#persons").text(data.person);
                var html='';
                for(i in data.receive){
                    html+="恭喜 <span>"+data.receive[i].name+"</span> 在 "+data.receive[i].time+" 抽取 <span>"+data.receive[i].amount+"</span> 乐豆<br>";
                }
                $("#g1").html(html);
                html="";
                for(i in data.congratulate){
                    html+="恭喜 <span>"+data.congratulate[i].name+"</span> 在 "+data.congratulate[i].time+" 抽取 <span>"+data.congratulate[i].amount+"</span> 乐豆      ";
                }
                $("#scroll_begin").html(html);
            }});
            turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
            if(turnplate.restaraunts.length==0){
                alert("请先登录!");//location.href='/';
            }

            var rotateTimeOut = function (){
                $('#wheelcanvas').rotate({
                    angle:0,
                    animateTo:2160,
                    duration:8000,
                    callback:function (){
                        alert('网络超时，请检查您的网络设置！');
                    }
                });
            };

            //旋转转盘 item:奖品位置; txt：提示语;
            var rotateFn = function (item, txt){
                var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
                console.info("angles",angles);
                if(angles<270){
                    angles = 270 - angles;
                }else{
                    angles = 360 - angles + 270;
                }
                $('#wheelcanvas').stopRotate();
                $('#wheelcanvas').rotate({
                    angle:0,
                    animateTo:angles+1800,
                    duration:8000,
                    callback:function (){
                        alert("恭喜你获得 " +txt+ "乐豆");
                        turnplate.bRotate = !turnplate.bRotate;
                    }
                });
            };

            $('.pointer').click(function (){
                if(1>num){
                    alert("您没有抽奖机会了");
                    return;
                }
                if(turnplate.bRotate)return;
                turnplate.bRotate = !turnplate.bRotate;
                //获取随机数(奖品个数范围内)
                var item = rnd(1,turnplate.restaraunts.length);
                console.info("item",item);
                $.ajax({ url: "/b.php?c=Activity&a=getprize", async:false,dataType:"json", success: function(data){
                    item=data.message;
                }});
                if(1>item){
                    alert("您已经抽过奖了");
                    return;
                }
                console.info("item",item);

                //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
                rotateFn(item, turnplate.restaraunts[item-1]);
                num--;
                $("#num").text(num);
                console.log(item);
            });
        });

        function rnd(n, m){
            var random = Math.floor(Math.random()*(m-n+1)+n);
            return random;

        }


        //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
        window.onload=function(){
            drawRouletteWheel();
        };

        function drawRouletteWheel() {
            var canvas = document.getElementById("wheelcanvas");
            if (canvas.getContext) {
                //根据奖品个数计算圆周角度
                var arc = Math.PI / (turnplate.restaraunts.length/2);
                var ctx = canvas.getContext("2d");
                //在给定矩形内清空一个矩形
                ctx.clearRect(0,0,422,422);
                //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
                ctx.strokeStyle = "#FFBE04";
                //font 属性设置或返回画布上文本内容的当前字体属性
                ctx.font = '16px Microsoft YaHei';
                for(var i = 0; i < turnplate.restaraunts.length; i++) {
                    var angle = turnplate.startAngle + i * arc;
                    ctx.fillStyle = turnplate.colors[i];
                    ctx.beginPath();
                    //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
                    ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                    ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                    ctx.stroke();
                    ctx.fill();
                    //锁画布(为了保存之前的画布状态)
                    ctx.save();

                    //----绘制奖品开始----
                    ctx.fillStyle = "#E5302F";
                    var text = turnplate.restaraunts[i];
                    var line_height = 17;
                    //translate方法重新映射画布上的 (0,0) 位置
                    ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

                    //rotate方法旋转当前的绘图
                    ctx.rotate(angle + arc / 2 + Math.PI / 2);

                    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                    ctx.font = 'bold 20px Microsoft YaHei';
                    //if(parseInt(text)){
                    ctx.font = 'bold 20px Microsoft YaHei';
                    ctx.fillText(text, -ctx.measureText(text).width / 2, 0* line_height);
                    ctx.font = 'bold 16px Microsoft YaHei';
                    ctx.fillText("乐豆", -ctx.measureText("乐豆").width / 2, 2* line_height);

                    //添加对应图标
                    if(text.indexOf("闪币")>0){
                        var img= document.getElementById("shan-img");
                        img.onload=function(){
                            ctx.drawImage(img,-15,10);
                        };
                        ctx.drawImage(img,-15,10);
                    }else if(text.indexOf("谢谢参与")>=0){
                        var img= document.getElementById("sorry-img");
                        img.onload=function(){
                            ctx.drawImage(img,-15,10);
                        };
                        ctx.drawImage(img,-15,10);
                    }
                    //把当前画布返回（调整）到上一个save()状态之前
                    ctx.restore();
                    //----绘制奖品结束----
                }
            }
        }

    </script>
	<script type="text/javascript"> 
		function ScrollImgLeft(){ 
		var speed=50; 
		var scroll_begin = document.getElementById("scroll_begin"); 
		var scroll_end = document.getElementById("scroll_end"); 
		var scroll_div = document.getElementById("scroll_div"); 
		scroll_end.innerHTML=scroll_begin.innerHTML; 
		function Marquee(){ 
		if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
		scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
		else 
		scroll_div.scrollLeft++; 
		} 
		var MyMar=setInterval(Marquee,speed); 
		scroll_div.onmouseover=function() {clearInterval(MyMar);} 
		scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} 
		} 
</script> 
</head>
<body>
<div id="main">
	<div id="gongao"> 
		<div style="height:24px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div">
            <marquee style="WIDTH: 100%; HEIGHT: 24px" scrollamount="6" direction="Left" ><div id="scroll_begin">

			</div> </marquee>
		<div id="scroll_end"></div> 
		</div> 
	</div>
	<div class="width_980">
		<div class="j">
			<p>你获得的抽奖次数 <span id="num">0</span> 次</p>
			<p>已经有<span id="persons">0</span> 人次领取</p>
		</div>
		<div align="center" id="g">
            <marquee style="WIDTH: 310px; HEIGHT: 200px" scrollamount="2" direction="up" >

			<div id="g1">
			  
			</div></marquee>
			<div id="g2"></div>
		</div>

		<div class="banner">
			<div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;">
				<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
				<img class="pointer" src="images/turnplate-pointer.png"/>
			</div>
			<div class="list">
				<ul id="list">

				</ul>
			</div>
		</div>
		
		<div class="footer">
			<p>温馨提示:有昨日充值且有流水者每日可获得1次轮盘大奉送活动机会。</p>
			<p style="color:red;">警告:任何参加活动的玩家，一旦发现无正常投注记录或通过BUG刷乐豆者，滴滴有权冻结该账号，并永久删除该账号。本次活动最终解释权归滴滴所有。</p>
		</div>
	</div>

</div>
</body>
</html>